/**
 * Button Component Styles
 * Primary, secondary, icon buttons
 */

/* Base Button */
button {
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
    border: none;
    border-radius: var(--border-radius-md);
    transition: all var(--transition-speed) var(--transition-curve);
    outline: none;
}

button:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

/* Primary Button */
.button-primary,
#sendButton,
#saveModelSettingsButton {
    background-color: var(--button-primary-bg);
    color: var(--button-primary-text);
    padding: 10px 20px;
    font-weight: 500;
}

.button-primary:hover:not(:disabled),
#sendButton:hover:not(:disabled),
#saveModelSettingsButton:hover:not(:disabled) {
    background-color: rgba(var(--primary-rgb), 0.9);
    box-shadow: var(--shadow-md);
}

.button-primary:active:not(:disabled),
#sendButton:active:not(:disabled),
#saveModelSettingsButton:active:not(:disabled) {
    transform: translateY(1px);
}

/* Secondary Button */
.button-secondary,
#clearButton,
#resetModelSettingsButton {
    background-color: var(--button-secondary-bg);
    color: var(--button-secondary-text);
    padding: 10px 20px;
    font-weight: 500;
}

.button-secondary:hover:not(:disabled),
#clearButton:hover:not(:disabled),
#resetModelSettingsButton:hover:not(:disabled) {
    background-color: rgba(var(--primary-rgb), 0.18);
}

/* Icon Button (Circular) */
.icon-button,
.left-sidebar-toggle,
#toggleSidebarButton,
#toggleLeftSidebarButton,
#themeToggleButton {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background-color: var(--primary-color);
    color: white;
}

.icon-button:hover,
.left-sidebar-toggle:hover,
#toggleSidebarButton:hover,
#toggleLeftSidebarButton:hover,
#themeToggleButton:hover {
    opacity: 1;
    box-shadow: var(--shadow-md);
    transform: scale(1.05);
}

/* Refresh Button */
#refreshModelsButton,
#refreshServerInfoButton {
    background-color: var(--surface-color);
    border: 1px solid var(--input-border);
    padding: 8px 16px;
    border-radius: var(--border-radius-sm);
}

#refreshModelsButton:hover,
#refreshServerInfoButton:hover {
    background-color: var(--surface-variant-rgb);
    border-color: var(--primary-color);
}

/* Clear Log Button */
#clearLogButton {
    background-color: var(--error-color);
    color: white;
    padding: 6px 12px;
    font-size: 0.9em;
    border-radius: var(--border-radius-sm);
}

#clearLogButton:hover:not(:disabled) {
    background-color: rgba(var(--error-rgb), 0.8);
}
